import { Module } from 'vuex';
import { GlobalDataProps, actionWrapper } from './index';
import { RespListData } from './respTypes';
import { PageData } from './editor';

export type TemplateProps = Required<Omit<PageData, 'props' | 'setting'>>
export interface TemplatesProps {
  data: TemplateProps[];
  totoalTemplates: number;
  works: TemplateProps[];
  totalWorks: number;
}

const templates: Module<TemplatesProps, GlobalDataProps> = {
  state: {
    data: [],
    totoalTemplates: 0,
    works: [],
    totalWorks: 0
  },
  mutations: {
    fetchTemplates(state, rawData: RespListData<TemplateProps>) {
      const { count, list } = rawData.data;
      state.data = [...state.data, ...list];
      state.totoalTemplates = count;
    },
    fetchWorks(state, rawData: RespListData<TemplateProps>) {
      const { count, list } = rawData.data;
      console.log(list)
      state.works = list
      state.totalWorks = count
    }
  },
  actions: {
    fetchTemplates: actionWrapper('/templates', 'fetchTemplates'),
    fetchWorks: actionWrapper('/works', 'fetchWorks')
  },
  getters: {
    getTemplateById: (state) => (id: number) => {
      return state.data.find((t) => t.id === id);
    },
  },
};

export default templates;
